<template>
    <ak-title>AKjs前端框架 > 关于我们</ak-title>

    <ak-main>
        <div class="module bg_white mt_2 mb_2 wm_96 h_in">
            <ul class="plug_filtrNav w_60 center text_al_c mt_2rem mb_2rem">
                <li class="pa_1rem cur_pointer dis_inbl bg_theme c_white" data-filter="all">全部</li>
                <li class="pa_1rem cur_pointer dis_inbl" data-filter="1">城市</li>
                <li class="pa_1rem cur_pointer dis_inbl" data-filter="2">自然</li>
                <li class="pa_1rem cur_pointer dis_inbl" data-filter="3">工业</li>
                <li class="pa_1rem cur_pointer dis_inbl" data-filter="4">白昼</li>
                <li class="pa_1rem cur_pointer dis_inbl" data-filter="5">夜景</li>
            </ul>
            <div class="plug_filtr length4 min_h_24_rem list_h_8rem dis_none">
                <div class="dis_inbl ovh" data-category="1, 5">
                    <figure class="h_in ovh mt_5 text_al_c">
                        <img src="img/tibet-1.jpg" class="w_90">
                    </figure>
                </div>
                <div class="dis_inbl ovh" data-category="2, 5">
                    <figure class="h_in ovh mt_5 text_al_c">
                        <img src="img/tibet-2.jpg" class="w_90">
                    </figure>
                </div>
                <div class="dis_inbl ovh" data-category="1, 4">
                    <figure class="h_in ovh mt_5 text_al_c">
                        <img src="img/tibet-3.jpg" class="w_90">
                    </figure>
                </div>
                <div class="dis_inbl ovh" data-category="3">
                    <figure class="h_in ovh mt_5 text_al_c">
                        <img src="img/tibet-4.jpg" class="w_90">
                    </figure>
                </div>
                <div class="dis_inbl ovh" data-category="3, 4">
                    <figure class="h_in ovh mt_5 text_al_c">
                        <img src="img/tibet-5.jpg" class="w_90">
                    </figure>
                </div>
                <div class="dis_inbl ovh" data-category="2, 4">
                    <figure class="h_in ovh mt_5 text_al_c">
                        <img src="img/tibet-6.jpg" class="w_90">
                    </figure>
                </div>
                <div class="dis_inbl ovh" data-category="1, 5">
                    <figure class="h_in ovh mt_5 text_al_c">
                        <img src="img/tibet-3.jpg" class="w_90">
                    </figure>
                </div>
                <div class="dis_inbl ovh" data-category="2, 4">
                    <figure class="h_in ovh mt_5 text_al_c">
                        <img src="img/tibet-2.jpg" class="w_90">
                    </figure>
                </div>
                <div class="dis_inbl ovh" data-category="3">
                    <figure class="h_in ovh mt_5 text_al_c">
                        <img src="img/tibet-1.jpg" class="w_90">
                    </figure>
                </div>
            </div>
            <div class="plug_Product ml_2 w_48 fl mt_3rem">
            </div>
            <div class="plug_tablist ml_2 w_48 fl mt_3rem dis_none">
                <div class="ak-small_box">
                    <button class="ak-is_prev">
                        <i class="icon-ln_fanhui_a"></i>
                    </button>
                    <div>
                        <ol>
                            <li data-id="1">
                                <span class="line_h_48rem">功能1</span>
                            </li>
                            <li data-id="2">
                                <span class="line_h_48rem">功能2</span>
                            </li>
                            <li data-id="3">
                                <span class="line_h_48rem">功能3</span>
                            </li>
                            <li data-id="4">
                                <span class="line_h_48rem">功能4</span>
                            </li>
                            <li data-id="5">
                                <span class="line_h_48rem">功能5</span>
                            </li>
                            <li data-id="6">
                                <span class="line_h_48rem">功能6</span>
                            </li>
                        </ol>
                    </div>
                    <button class="ak-is_next"><i class="icon-ln_qianjin_a"></i></button>
                </div>
            </div>
        </div>
    </ak-main>
</template>

<script type="text/javascript">
    //引入AKjs功能插件的区域
    /*-----------------------------------------------AKjs_Filterizr 使用方法-------------------------------------------*/
    $(function() {
        $('.plug_filtr').AKjs_Filterizr({
            filter: 'all',
            onFiltering: {
                onFilteringStart: function() {
                },
                onFilteringEnd: function() {
                }
            },
            callback:function(ele,filter){
                ele.fadeIn();
                $('.plug_filtrNav li').on('click', function() {
                    $(this).toggleClass('bg_theme c_white').siblings().removeClass('bg_theme c_white');
                });
            }
        });
    });

    /*-----------------------------------------------AKjs_ProductPhoto 使用方法-------------------------------------------*/
    var Json_imgData = [
        {
            id: 1,
            small:'img/tibet-1.jpg',
            large:'img/tibet-1.jpg'
        },
        {
            id: 2,
            small:'img/tibet-2.jpg',
            large:'img/tibet-2.jpg'
        },
        {
            id: 3,
            small:'img/tibet-3.jpg',
            large:'img/tibet-3.jpg'
        },
        {
            id: 4,
            small:'img/tibet-4.jpg',
            large:'img/tibet-4.jpg'
        },
        {
            id: 5,
            small:'img/tibet-5.jpg',
            large:'img/tibet-5.jpg'
        },
        {
            id: 6,
            small:'img/tibet-6.jpg',
            large:'img/tibet-6.jpg'
        }
    ];
    $(function(){
        $(".plug_Product").AKjs_ProductPhoto({
            data: Json_imgData,
            large_height: "20rem", //大图片区域的高度 (宽度自动计算)
            small_size: "5rem", //缩略图的大小（宽度和高度）
            btn_width: "3rem", //切换按钮的宽度
            btn_height: "5rem", //切换按钮的高度
            state: "bor_theme", //缩略图选中后的效果Class
            vis: 5, //缩略图默认显示的数量
            autoPlay: true, //自动播放 (true/false)
            playDelay: 3000, //自动切换延迟时间
            callback: function(large,small,index) { //初始化回调入口 （当前的大图片元素，当前的缩略图元素，当前数）
                //console.log(large);
                //console.log(small);
                //console.log(index);
            },
            changeback: function(large,small,index) { //初始化回调入口 （当前的大图片元素，当前的缩略图元素，当前数）
                //console.log(large);
                //console.log(small);
                //console.log(index);
            }
        });
    });
    $(function(){
        $(".plug_tablist").AKjs_ProductPhoto({
            large_height: "20rem", //大图片区域的高度 (宽度自动计算)
            small_size: "5rem", //缩略图的大小（宽度和高度）
            btn_width: "3rem", //切换按钮的宽度
            btn_height: "5rem", //切换按钮的高度
            state: "bor_theme c_theme font_bold", //缩略图选中后的效果Class
            vis: 5, //缩略图默认显示的数量
            autoPlay: true, //自动播放 (true/false)
            playDelay: 3000, //自动切换延迟时间
            callback: function(large,small,index) { //初始化回调入口 （当前的大图片元素，当前的缩略图元素，当前数）
                //console.log(large);
                //console.log(small);
                //console.log(index);
            },
            changeback: function(large,small,index) { //初始化回调入口 （当前的大图片元素，当前的缩略图元素，当前数）
                console.log(large);
                console.log(small);
                console.log(index);
            }
        });
    });
</script>

<style type="text/css">
    /*样式覆盖区域*/
</style>

<!--
//注：template，ak-page-code，ak-title，ak-plugin，script，style等这些元素在页面中不能多个使用否则代码无效；
路由页面的布局结构使用方法（必须用以下的结构使用）：
<template>
    <ak-page-code></ak-page-code>
    <ak-title></ak-title>
    <div></div>
    <ak-plugin></ak-plugin>
</template>
<script>
</script>
<style>
</style>
-->
